

<template>
  <div class="dao" @click="todoClick" :style="mstyle">
      <van-circle
      v-model="currentRate"
      :rate="rate"
      :size="size"
      :stroke-width="swidth"
      :speed="speed"
      :text="text"
      :clockwise="!flag"
      :color="color"
    />
  </div>
</template>

<script>
export default {
props:{
  mstyle:{
    type:Object,
    default(){
      return{
        
      }
    }
  },
  size:{
    type:String,
    default:'60px',
  },
  swidth:{
    type:Number,
    default:40,
  },
  time:{  // 倒计时的时间
    type:Number,
    default:5
  },
  flag:{
    type:Boolean,  // 顺时针

  },
  color:{
    type:[Object,String] ,
    default(){
      return {
        '0%': '#3fecff',
      '100%': '#6149f6',
      }
    }
  },
  onFinish:{
    type:Function,
    default(){
      return ()=>{

      }
    }
  },
  toggle:{
    type:Boolean,
  },
  isClick:{
    type:Boolean,
  }
},
data(){
  return {
    currentRate:0,
    rate:100,
  }
},
computed:{
  speed(){
    return this.rate/this.time;
  },
  text(){
      // return
      return this.toggle ?  (Math.floor((this.rate - this.currentRate) / this.speed) + ' S') :( this.currentRate.toFixed(0) + '%')
  }
},
watch:{
  currentRate(v){
    if(v==this.rate){
      this.onFinish()
    }
  }
},
methods:{
  todoClick(){
    if(this.isClick){
      this.onFinish()
    }
  }
}
}
</script>

<style scoped  lang="scss" >
 .dao{
  position: fixed;
  top:20px;
  right:20px;
  z-index:1000;
  ::v-deep .van-circle__text{
      color:#3fecff !important;
      font-size: 18px !important;
  }
}
</style>
